<template>
    <div class="newsDetail">
        <div class="newsNav">
            <div class="container">
                <div class="news_path">
                    <ol class="breadcrumb">
                        <li class="breadcrumb_icon ce_icon ce_icon_E902"></li>
                        <li class="breadcrumb_link"><a @click="inNews">新闻中心</a></li>
                        <li class="breadcrumb_link"><a @click="inNews">{{ARTICLE_TYPE |
                            optionObjectKV(article.typeId)}}</a></li>
                        <li class="active">正文</li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="container newsHeader">
            <h1 class="news_title">{{article.name}}</h1>
            <div class="news_title_line"></div>
            <div class="news_info">
                <span class="news_time">{{createTime.year}}年{{createTime.month}}月{{createTime.day}}日 {{createTime.time}}</span>
                <span class="news_author">亚盟电商平台</span>
            </div>
        </div>
        <div class="container newsContent" v-html="article.articleContent">
        </div>
        <div class="container newsPage">
            <button type="button" class="btn btn-default" @click="previousArticle(article)">上一篇</button>
            <button type="button" class="btn btn-default" @click="nextArticle(article)">下一篇</button>
            <!--<div class="page_line"></div>-->
            <!--<el-divider>
                <template>
                    <div class="divider_box">
                        评论区
                    </div>
                </template>
            </el-divider>-->
        </div>

        <!--<div id="newsComment" class="container newsComment">
            <ul id="news_comment_ul" class="news_comment_ul ">
                <li class="comment_content clearfix">
                    <div class="content_left col-md-1">
                        <a href="javascript:;"><img class="member_icon" src="../../../public/base/imgs/news/icon2.jpg"/></a>
                    </div>

                    <div class="row content_list col-md-8">
                        <div class="main">
                            <a class="close" href="javascript:;" @click="delComment">x</a>
                            <p class="main_text">
                                <a class="member_name">卡卡西</a>：
                                我来第一条评论，这是第一个评论功能展示。我来第一条评论，这是第一个评论功能展示。
                            </p>
                            <img class="main_pic img-responsive" src="../../../public/base/imgs/news/my-logo-2.png">
                        </div>
                        <div class="info clearfix">
                            <span class="ce_icon ce_icon_E906"></span>
                            <span class="info_time">2021-6-11 09:10</span>
                            <a class="praise" href="javascript:;" @click="addCommentPraise">
                                <span class="glyphicon glyphicon-thumbs-up"></span>
                                <span class="praise_font" v-if="praiseAt!==1">赞</span>
                                <span class="praise_font" v-if="praiseAt===1">取消赞</span></a>
                        </div>
                        <div class="praise_total" style="display: block" v-if="praiseTotal>1">
                            <span class="glyphicon glyphicon-thumbs-up"></span>
                            <span class="praise_total_me" v-if="praiseAt===1 ">我和</span>{{praiseTotal}}个人觉得很赞

                        </div>
                        <div class="praise_total" style="display: block" v-if="praiseTotal===1">
                            <span class="glyphicon glyphicon-thumbs-up"></span>
                            <span class="praise_total_me" v-if="praiseAt===1 ">我 </span>觉得很赞
                        </div>
                        <div class="praise_total" style="display: block" v-if="praiseTotal<1">
                            <span class="glyphicon glyphicon-thumbs-up"></span>
                            <span class="praise_total_me" v-if="praiseAt===1 ">我 </span>觉得很赞
                        </div>
                        <div class="praise_members">
                            <div class="block" v-for="icon in memberIcons" :key="icon.index">
                                &lt;!&ndash;方块头像shape="round"&ndash;&gt;
                                <el-avatar class="members_icon" :size="50" :src="icon"></el-avatar>
                            </div>
                        </div>
                        <div class="comment_line"></div>
                        <ul class="comment_list_sub">

                            &lt;!&ndash;判断登录用户，如果=，这里的member=self，否则=other&ndash;&gt;
                            <li class="comment_box clearfix">
                                <img class="member_icon_sub" src="../../../public/base/imgs/news/my-logo-2.png">
                                <div class="comment_box_content">
                                    <p class="content_text">
                                        &lt;!&ndash;判断登录用户，如果=，则显示我，否则显示其他用户名&ndash;&gt;
                                        <span class="member">我：</span>
                                        写的太好了，膜拜！
                                    </p>
                                    <p class="content_time">
                                        <span class="ce_icon ce_icon_E906"></span>
                                        2021-6-11 09:10
                                        &lt;!&ndash;判断登录用户，如果=，则显示“删除”，否则显示：回复&ndash;&gt;
                                        <a href="javascript:;" class="content_del" @click="delCommentSub">删除</a>
                                        <a href="javascript:;" class="content_prise" style=""
                                           @click="addCommentSubPraise">
                                            <span class="glyphicon glyphicon-thumbs-up"></span>
                                            {{praiseTotal1}}
                                            <span class="praise_font" v-if="praiseAt1!==1">赞</span>
                                            <span class="praise_font" v-if="praiseAt1===1">取消赞</span>

                                        </a>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <div id="textBox" class="text_box">
                <el-input class="text_area"
                          type="textarea"
                          :rows="1"
                          placeholder="快来写下你的神评妙论吧~"
                          maxlength="200"
                          show-word-limit
                          v-model="commentInput">
                </el-input>

            </div>
            <div class="submit_group">
                <el-button id="submitBTN" class="replay_btn" type="primary" @click="commentSubmit">回 复</el-button>
                &lt;!&ndash;<span class="replay_word">
                    <span class="length">0</span>
                     /200
                </span>&ndash;&gt;

            </div>
        </div>-->
    </div>
</template>

<script>
    export default {
        name: "NewsDetail",
        data() {
            return {
                message: "亚盟电商·以岭药业战略合作启动大会",
                squareUrl: "/base/imgs/news/icon1.jpg",
                memberIcons: ["/base/imgs/news/icon1.jpg", "/base/imgs/news/icon2.jpg", "/base/imgs/news/icon1.jpg", "/base/imgs/news/icon2.jpg", "/base/imgs/news/icon1.jpg", "/base/imgs/news/icon2.jpg"],
                commentInput: "",
                //这里需要注意，article结构的createTime这里接收不到里面的对象，需要这里再自定义一个接收
                createTime: {},
                praiseAt: 0,
                praiseTotal: 0,
                praiseAt1: 0,
                praiseTotal1: 0,
                commentContents: 1,
                wordSize: 0,//长度判断
                article: {},
                articles: [],
                ARTICLE_TYPE: ARTICLE_TYPE,
            }
        },
        mounted() {
            if (Tool.isNotEmpty(this.$route.params.item)) {
                this.article = this.$route.params.item;
                this.createTime = this.article.createTime;
            } else {
                this.article = SessionStorage.get(ARTICLE);
                this.createTime = this.article.createTime;
            }
        },
        methods: {
            getWidth() {
                let content = document.getElementById("newsComment");
                let textBox = document.getElementById("textBox");
                let submitBTN = document.getElementById("submitBTN");
                $(window).on("resize", function () {
                    let wid = $(window).width();
                    if (wid > 992) {
                        content.style.left = "15%";
                        textBox.style.marginLeft = "8.5%";
                        submitBTN.style.marginLeft = "790%";
                    } else if (wid < 992 && wid > 768) {
                        content.style.left = "15%";
                        textBox.style.marginLeft = "0";
                        submitBTN.style.marginLeft = "690%";
                    } else {
                        content.style.left = "1%";
                        textBox.style.marginLeft = "0";
                        submitBTN.style.marginLeft = "400%";
                    }
                }).trigger("resize");
            },
            inNews() {
                this.$router.push("/news/list");
            },
            /*删除评论*/
            delComment() {
                let newsCommentUL = document.getElementById("news_comment_ul");
                //获取自定义属性：element.getAttribute('e');
                let commentLis = newsCommentUL.children;
                for (let i = 0; i < commentLis.length; i++) {
                    commentLis[i].onclick = function (e) {
                        //IE兼容
                        e = e || window.event;
                        let el = e.srcElement;
                        switch (el.className) {
                            case 'close':

                                this.parentNode.removeChild(el.parentNode.parentNode.parentNode);
                                break;
                        }
                    }
                }
            },
            /*点赞*/
            addCommentPraise() {
                if (this.praiseAt === 0) {
                    this.praiseAt = 1;
                    this.praiseTotal = this.praiseTotal + this.praiseAt;
                    /*TODO 数据praiseTotal+1保存 save ,同时保存member_uniId*/
                    this.memberIcons.push("/base/imgs/news/icon3.png");
                    this.praiseTotal = this.praiseTotal - this.praiseAt;
                } else if (this.praiseAt === 1) {
                    /*TODO 数据praiseTotal-1保存 save*/
                    this.praiseAt = 0;
                    Tool.removeObj(this.memberIcons, "/base/imgs/news/icon3.png");
                    //this.memberIcons.push("/base/imgs/news/icon3.jpg");
                }
            },
            /*评论*/
            addComment() {
                let textArea = document.getElementsByClassName("text_area")[0];
                let submitBTN = document.getElementById("submitBTN");
                let textChild = textArea.childNodes[0];
                //获取焦点
                textChild.onfocus = function () {
                    textChild.rows = 3;
                }
                //失去焦点
                textChild.onblur = function () {
                    textChild.rows = 1;
                }

            },
            /*TODO 点击回复：点击评论/回复<a> 出现输入框，获取commentUniId*/
            commentSubmit() {
                this.wordSize = 0;
                let textArea = document.getElementsByClassName("text_area")[0];
                let submitBTN = document.getElementById("submitBTN");
                let textChild = textArea.childNodes[0];
                let siblings = textArea.parentNode;
            },
            /*子评论点赞*/
            addCommentSubPraise() {
                if (this.praiseAt1 === 0) {
                    this.praiseAt1 = 1;
                    this.praiseTotal1 = this.praiseTotal1 + this.praiseAt1;
                    /*TODO 数据praiseTotal+1保存 save ,同时保存member_uniId*/
                } else if (this.praiseAt1 === 1) {
                    /*TODO 数据praiseTotal-1保存 save*/
                    this.praiseTotal1 = this.praiseTotal1 - this.praiseAt1;
                    this.praiseAt1 = 0;

                }
            },
            /*子评论删除*/
            delCommentSub() {
                toast.showConfirm("评论1", function () {

                })
            },
            /*上一篇文章*/
            previousArticle(item) {
                /*item.createTime=this.createTime.year+"-"+this.createTime.month+"-"+this.createTime.day+" "+this.createTime.time;*/
                let loading = this.openLoading();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/client/article/previous/' + item.uniId)
                    .then((response) => {
                        setTimeout(function () {
                            loading.close();
                        }, 200);
                        let resp = response.data;
                        this.article = resp.responseData;

                        let createTime = this.article.createTime;
                        let year = createTime.substring(0, 4);
                        let month = createTime.substring(5, 7);
                        let day = createTime.substring(8, 10);
                        let time = createTime.substring(11);
                        this.createTime.year = year;
                        this.createTime.month = month;
                        this.createTime.day = day;
                        this.createTime.time = time;
                        this.article.createTime = this.createTime;
                    })
            },
            nextArticle(item) {
                /*item.createTime=this.createTime.year+"-"+this.createTime.month+"-"+this.createTime.day+" "+this.createTime.time;*/
                let loading = this.openLoading();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/client/article/next/' + item.uniId)
                    .then((response) => {
                        setTimeout(function () {
                            loading.close();
                        }, 200);
                        let resp = response.data;
                        this.article = resp.responseData;

                        let createTime = this.article.createTime;
                        let year = createTime.substring(0, 4);
                        let month = createTime.substring(5, 7);
                        let day = createTime.substring(8, 10);
                        let time = createTime.substring(11);
                        this.createTime.year = year;
                        this.createTime.month = month;
                        this.createTime.day = day;
                        this.createTime.time = time;
                        this.article.createTime = this.createTime;
                    })
            },
        }
    }
</script>

<style scoped>
    .newsDetail .newsNav {
        background-color: #f5f5f5;
    }

    /*面包屑导航设置*/
    .newsDetail .news_path .breadcrumb {
        line-height: 40px;
        position: relative;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .newsDetail .news_path .breadcrumb .breadcrumb_icon {
        float: left;
        text-align: center;
        width: 40px;
        height: 40px;
        font-size: 28px;
        color: #fff;
        margin-right: 10px;
        border-radius: 5px;
        background-color: #e92322;
    }

    .newsDetail .news_path .breadcrumb .breadcrumb_link {
        font-size: 15px;
        display: inline-block;
        cursor: pointer;
    }

    .newsDetail .news_path .breadcrumb .breadcrumb_link a {
        font-size: 15px;
        text-decoration: none;
    }

    .newsDetail .news_path .breadcrumb .breadcrumb_link a:hover,
    .newsDetail .news_path .breadcrumb .breadcrumb_link a:focus {
        color: #e92322;
    }

    /*新闻标题设置*/
    .newsHeader {
        position: relative;
    }

    .newsHeader .news_title {
        text-align: center;
        color: #777;
    }

    .newsHeader .news_title_line {
        display: inline-block;
        width: 100%;
        height: 2px;
        color: #777;
        border-top: 2px solid #ccc;
    }

    .newsHeader .news_info {
        display: inline-block;
        float: right;
        margin-right: 20%;
    }

    .newsHeader .news_info .news_time {
        float: left;
        margin-right: 10px;
        color: #777;
    }

    .newsPage {
        text-align: center;
        margin: 20px auto;
    }

    .newsPage button {
        margin-right: 20px;
    }

    .newsPage button:hover, .newsPage button:focus {
        color: #e92322;
        background-color: #fff;
        border-color: #e92322;
    }

    .newsPage .page_line {
        margin-top: 20px;
        width: 100%;
        border-top: 1px dotted #dddddd;
    }

    .newsPage .divider_box {
        background-color: #1d7dd6;
        padding: 5px 20px;
        color: white;
        margin-top: 40px;
    }

    .newsPage .el-divider__text {
        background-color: #ffffff;
        position: relative;
        width: 130px;
        padding: 0 20px;
    }

    /*评论区*/
    /*1.主ul*/
    .newsComment {
        position: relative;
    }

    .newsComment .news_comment_ul {
        list-style: none;
        margin-top: 0;
        margin-bottom: 20px;
    }

    /*2.左侧栏*/
    .newsComment .news_comment_ul .comment_content {

    }

    .newsComment .news_comment_ul .comment_content:hover .close {
        display: block;
        width: 30px;
        background-color: #dddddd;
        padding: 5px;
        text-align: center;
    }

    .newsComment .news_comment_ul .comment_content .close {
        margin-left: 20px;
        float: right;
        display: none;
    }

    .newsComment .news_comment_ul .comment_content .content_left {
        float: left;

    }

    .newsComment .news_comment_ul .comment_content .content_left .member_icon {
        width: 50px;

    }

    /*3.右侧栏*/
    /*3.1第一条评论*/
    .newsComment .news_comment_ul .comment_content .content_list {

    }

    .newsComment .news_comment_ul .comment_content .content_list .main {
        max-width: 500px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .main .main_pic {
        width: 150px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .main .main_text {

    }

    .newsComment .news_comment_ul .comment_content .content_list .main .main_text a {
        text-decoration: none;
        cursor: pointer;
    }

    .newsComment .news_comment_ul .comment_content .content_list .main .main_text a:hover,
    .newsComment .news_comment_ul .comment_content .content_list .main .main_text a:focus {
        color: #e92322;
    }

    /*3.2评论info*/
    .newsComment .news_comment_ul .comment_content .content_list .info {
        max-width: 500px;
        margin-top: 5px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .info .praise_font {
        font-size: 15px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .info .ce_icon {
        color: #a8a2a2;
        margin-right: 5px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .info .info_time {
        margin-right: 5px;
        color: #a8a2a2;
    }

    .newsComment .news_comment_ul .comment_content .content_list .info .praise {
        float: right;
        text-decoration: none;
        margin-right: 10px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .info .praise {
        font-size: 16px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .info .praise .glyphicon {
        margin-right: 3px;

    }

    .newsComment .news_comment_ul .comment_content .content_list .praise_members {
        margin-top: 10px;
        margin-bottom: 5px;
        display: inline-block;
        width: 100%;
    }

    .newsComment .news_comment_ul .comment_content .content_list .praise_members .members_icon {
        margin-right: 5px;
        float: left;
    }

    .newsComment .news_comment_ul .comment_content .content_list .praise_total {
        max-width: 500px;
        background-color: #eee;
        border-radius: 5px;
        padding: 5px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .praise_total .glyphicon {
        color: #1d7dd6;
        margin-right: 3px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .praise_total .praise_total_me {
        color: #1d7dd6;
        margin-right: 5px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_line {
        max-width: 500px;
        margin-bottom: 10px;
        width: 100%;
        border-top: 2px solid #eee;
    }

    /*3.3评论子模块*/
    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub {
        list-style: none;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .member_icon_sub {
        width: 40px;
        float: left;
        margin-right: 10px;
    }

    /*子评论内容*/
    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content {
        max-width: 500px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content .content_text .member {
        color: #1d7dd6;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content .content_time {
        color: #777;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content .content_time .ce_icon {
        color: #777;
        margin-right: 3px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content .content_time .content_prise {
        text-decoration: none;
        float: right;
        font-size: 15px;
        margin-right: 20px;
    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content .content_time .content_prise .glyphicon {

    }

    .newsComment .news_comment_ul .comment_content .content_list .comment_list_sub .comment_box .comment_box_content .content_time .content_del {
        text-decoration: none;
        float: right;
        color: #e92322;
        margin-right: 10px;
    }

    /*输入评论*/
    .newsComment .text_box {
        width: 100%;
        display: inline-block;
        margin-bottom: 10px;
    }

    .newsComment .text_box .text_area {
        max-width: 500px;
    }

    /*提交评论*/
    .newsComment .submit_group {
        max-width: 500px;
        position: relative;
        margin-left: 10%;
        line-height: 30px;
        display: inline-block;
        margin-bottom: 20px;
    }

    .newsComment .replay_word {
        margin-right: 10px;
        float: left;
        min-width: 200px;
        position: absolute;
    }

    .newsComment .replay_btn {
        margin-left: 790%;
        display: inline-block;
        padding: 6px 10px;
        background-color: #e92322;
        border-color: #761313;
    }

    .newsComment .replay_btn:hover,
    .newsComment .replay_btn:focus {
        background-color: #fd4140;
    }
</style>